<template>
  <div class="app-container">
    <div>
      <el-input
        placeholder="请输入称重编号"
        v-model="queryParams.sql"
        clearable style="width: 18%">
      </el-input>
      <el-button type="primary" @click="getList" icon="el-icon-searchsousuo">搜索</el-button>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100% ; height:100%"
        @row-dblclick="handleRowDblClick"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="90px"
          sortable>
        </el-table-column>
        <el-table-column
          prop="czbh"
          label="称重编号"
          sortable>
        </el-table-column>
        <el-table-column
          prop="dz"
          label="袋重"
          width="200px"
          sortable>
        </el-table-column>
        <el-table-column
          prop="dpd"
          label="袋皮低"
          sortable>
        </el-table-column>
        <el-table-column
          prop="dpg"
          label="袋皮高"
          sortable>
        </el-table-column>
      </el-table>
      <el-dialog
        title="删除与修改"
        :visible.sync="dialogVisible"
        width="90%"
      >
        <el-form label-width="100px" :inline="true">
          <el-row :gutter="13">
            <!-- 第一行 -->
            <el-col :span="3">
              <el-form-item label="称重编号">
                <el-input v-model="selectedRow.czbh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="袋重">
                <el-input v-model="selectedRow.dz"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="袋皮低">
                <el-input v-model="selectedRow.dpd"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="袋皮高">
                <el-input v-model="selectedRow.dpg"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-button type="primary" @click="update_yc">修改</el-button>
          <el-button type="primary" @click="delete_yc">删除</el-button>
        </el-form>
      </el-dialog>

      <el-dialog
        title="吸潮添加"
        :visible.sync="fapiaoVisible"
        width="90%">
        <el-form label-width="100px" :inline="true">
          <el-row :gutter="20">
            <!-- 第一行 -->
            <el-col :span="5">
              <el-form-item label="称重编号:">
                <el-input v-model="selectedRow.czbh"></el-input>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="5">-->
            <!--              <el-form-item label="车号:">-->
            <!--                <el-input v-model="selectedRow.ch"></el-input>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="5">-->
            <!--              <el-form-item label="过磅状态:">-->
            <!--                <el-input v-model="selectedRow.gbzt"></el-input>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="5">
              <el-form-item label="标准袋重:">
                <el-input v-model="selectedRow.dz"></el-input>
              </el-form-item>
            </el-col>
            <!--          </el-row>-->
            <!--          <el-row>-->
            <el-col :span="5">
              <el-form-item label="过磅标准低:">
                <el-input v-model="selectedRow.dpd"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="过磅标准高:">
                <el-input v-model="selectedRow.dpg"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="primary" @click="baocun">保存</el-button>
          <el-button type="primary" @click="qw">取消</el-button>
        </el-form>
      </el-dialog>
    </div>
    <div>

      <el-button type="primary" @click="insert_yc">添加</el-button>

<!--      <el-button type="primary" @click="insert_d_yc">多交货单新增</el-button>-->

    </div>
    <div class="pagination-container">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>

</template>

<script setup>

import {deletexccl, insertxccl, selectbyczbh, selectxccl, updatexccl} from "@/api/system/Fdongbei/xccl";
import {selectByCzbh} from "@/api/system/Fdongbei/yccl";

export default {
  data() {
    return {
      value: false,
      tableData: [],
      dialogVisible: false,
      fapiaoVisible: false,
      chexiangchangVisible: false,
      selectedRow: {},
      datatab: [],
      sanhao: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sql: '',
      },
      total: 0,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$modal.loading("查询中。。。")
      selectxccl(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
          this.$modal.closeLoading()
        }
      );
    },
    insert_yc() {
      this.fapiaoVisible = true;
    },
    baocun() {
      insertxccl(this.selectedRow).then(responser => {
        if (responser.data > 0) {
          this.$modal.alert("保存成功")
          this.getList()
        } else {
          this.$modal.alertWarning('保存失败')
        }
      })
    },
    handleRowDblClick(row, column, event) {
      selectbyczbh({czbh: row.czbh}).then(response => {
        this.selectedRow = response.data
        // 显示对话框
        this.dialogVisible = true;
      })

    },
    update_yc(){
      updatexccl(this.selectedRow).then(response => {
        if (response.data > 0) {
          this.$modal.alert("修改成功")
          this.getList()
        } else {
          this.$modal.alertWarning('修改失败')
        }
      })
    },
    delete_yc(){
      deletexccl({czbh : this.selectedRow.czbh}).then(response => {
        if (response.data > 0) {
          this.$modal.alert("删除成功")
          this.getList()
        } else {
          this.$modal.alertWarning('删除失败')
        }
      })
    },
    insert_d_yc(){

    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 90vh; /* 使容器至少占满整个视口高度 */
}

.content {
  flex: 1; /* 使主要内容区域占据尽可能多的空间 */
}

.pagination-container .el-pagination {
  width: 100%;
}

.pagination-container {
  display: flex;
  width: 78%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 16px; /* 可选，根据需要调整间距 */
  background-color: #ffffff; /* 可选，根据需要调整背景色 */
}
</style>
